<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舆情分析</title>
    <link rel="stylesheet" href="./css/big-box.css">
    <style>
        .center-right-top {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 95%;
            height: 170px;
            margin-left: 11px;
        }

        .center-right-bottom {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 95%;
            height: 170px;
            margin-left: 11px;
        }

        .bottom-right {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 95%;
            height: 150px;
            margin-left: 11px;
        }

        .bottom-content {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 60%;
            height: 150px;
            margin-left: 11px;
        }

        .bottom-content-2 {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 35%;
            height: 150px;
            margin-left: 10px;
            position: absolute;
            right: 10px;
            top: 40px;
        }

        .bottom-left {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 60%;
            height: 150px;
            margin-left: 11px;
        }

        .bottom-left-2 {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 35%;
            height: 150px;
            margin-left: 10px;
            position: absolute;
            right: 10px;
            top: 40px;
        }

        .center-left-top {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 175px;
            margin-left: 11px;
        }

        .center-left-top-2 {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 175px;
            margin-left: 10px;
            position: absolute;
            right: 10px;
            top: 40px;
        }

        .center-left-bottom {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 175px;
            margin-left: 11px;
        }

        .center-left-bottom-2 {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 175px;
            margin-left: 10px;
            position: absolute;
            right: 10px;
            top: 40px;
        }

        .center-content-left {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 192px;
            margin-left: 5px;
        }

        .center-content-left-2 {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 192px;
            margin-left: 10px;
            position: absolute;
            right: 5px;
            top: 40px;
        }

        .center-content-left-3 {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 192px;
            margin-left: 5px;
            position: absolute;
            left: 0px;
            bottom: 10px;
        }

        .center-content-left-4 {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 47.5%;
            height: 192px;
            margin-left: 10px;
            position: absolute;
            right: 5px;
            bottom: 10px;
        }

        .center-content-right {
            border: 1px solid #505b83ad;
            background-color: #505b83ad;
            border-radius: 15px;
            width: 95.5%;
            height: 390px;
            margin-left: 5px;
        }

        .radius {
            border-radius: 50%;
            font-size: 13px;
        }

        .color1 {
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: black;
            background-color: #0078ff;
            position: absolute;
            top: 100px;
            left: 73px;
        }

        .color2 {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: black;
            background-color: #ffff00;
            position: absolute;
            top: 110px;
            left: 167px;
        }

        .color3 {
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: black;
            background-color: #9cff00;
            position: absolute;
            top: 150px;
            left: 170px;
        }

        .color4 {
            width: 65px;
            height: 65px;
            line-height: 65px;
            color: black;
            background-color: #ff6c00;
            position: absolcute;
            top: 80px;
            left: 20px;
        }

        .bottom-left-2 {
            color: #fff;
            font-size: 12px;
            text-align: center;
        }

        .dv1 {
            font-size: 14px;
            color: palevioletred;
        }

        .dv2 {
            font-size: 14px;
            color: powderblue;
        }

        .dv {
            font-size: 14px;
            color: yellow;
        }

        .huan {
            color: steelblue;
        }

        .bottom-content-2 {
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding-top: 30px;
        }

        .wu {
            font-size: 30px;
            color: thistle;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .blues {
            color: steelblue;
        }

        .cen1 {
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding-top: 50px;
        }

        .wu1 {
            color: turquoise;
            font-size: 30px;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .wu2 {
            color: yellow;
            font-size: 30px;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        img {
            width: 10px;
            height: 15px;
        }

        ul {
            list-style: none;
            font-size: 12px;
            color: #8FA6BD;
        }

        li {
            width: 100%;
            height: 60px;
            display: flex;
            padding-top: 6px;
            margin-bottom: 5px;
        }

        .div {
            width: 50px;
            height: 60px;
        }

        .image {
            width: 15px;
            height: 15px;
            margin-left: 10px;
            margin-top: 5px;
        }
        .li {
            background-color: #017097;
        }
    </style>
</head>

<body>
    <!-- 最上面的盒子 -->
    <div class="top">
        <!-- 左边盒子 -->
        <div class="left">
            <div class="left-box">警情警力</div>
            <div class="left-box">实有人口</div>
            <div class="left-box">流动人口</div>
            <div class="left-box">实名制</div>
        </div>
        <!-- 中间盒子 -->
        <div class="content">
            <h1>舆情分析</h1>
        </div>
        <!-- 右边盒子 -->
        <div class="right">
            <div class="right-box">舆情</div>
            <div class="right-box">交通</div>
            <div class="right-box">分析报告</div>
            <div class="right-box">返回</div>
        </div>
    </div>

    <!-- 中间的三个大盒子 -->
    <div class="center">
        <!-- 中间大盒子的左边的盒子 -->
        <div class="center-left">
            <div class="center-left-top-box">
                <p class="p1">舆情来源分析</p>
                <p class="p2">
                    <span>地区:甘孜</span>
                    <span class="times">2018-06-14</span>
                </p>
                <div class="center-left-top">
                    <div class="radius color1">无效报警2</div>
                    <div class="radius color2">求助</div>
                    <div class="radius color3">投诉2</div>
                    <div class="radius color4">灾害事故1</div>
                </div>
                <div class="center-left-top-2"></div>
            </div>
            <div class="center-left-bottom-box">
                <p class="p1">舆情区域分析</p>
                <p class="p2">
                    <span>状态:已调节</span>
                    <span class="times">时间段:2018-06-10至2018-06-14</span>
                </p>
                <div class="center-left-bottom"></div>
                <div class="center-left-bottom-2"></div>
            </div>
        </div>
        <!-- 中间大盒子的中间的盒子 -->
        <div class="center-content">
            <div class="center-content-left-box">
                <p class="p1">今日舆情</p>
                <p class="p2">
                    <span>状态:已调解</span>
                    <span class="times">时间段:2018-06-10</span>
                </p>
                <div class="center-content-left cen1">
                    <div>今年舆情总数</div>
                    <div class="wu">54</div>
                    <div class="blues">环比<img src="./img/iconup.png">2%</div>
                </div>
                <div class="center-content-left-2 cen1">
                    <div>本周舆情总数</div>
                    <div class="wu1">54</div>
                    <div class="blues">环比<img src="./img/icondown.png">3%</div>
                </div>
                <div class="center-content-left-3 cen1">
                    <div>本月舆情总数</div>
                    <div class="wu2">4</div>
                    <div class="blues">环比<img src="./img/icondown.png">3%</div>
                </div>
                <div class="center-content-left-4 cen1">
                    <div>今日舆情总数</div>
                    <div class="wu">54</div>
                    <div class="blues">环比<img src="./img/iconup.png">2%</div>
                </div>
            </div>
            <div class="center-content-right-box">
                <p class="p1">热门信息</p>
                <p class="p2">
                    <span>状态:已调解</span>
                    <span class="times">时间段:2018-06-10</span>
                </p>
                <div class="center-content-right">
                    <ul>
                        <li>
                            <div class="div">
                                <img src="./img/hot.png" class="image">
                            </div>
                            <div>
                                <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
                                <p>新浪微博 转发:86 2018-06-14 11:08:56</p>
                            </div>
                        </li>
                        <li class="li">
                            <div class="div">
                                <img src="./img/hot.png" class="image">
                            </div>
                            <div>
                                <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
                                <p>新浪微博 转发:86 2018-06-14 11:08:56</p>
                            </div>
                        </li>
                        <li>
                            <div class="div">
                                <img src="./img/hot.png" class="image">
                            </div>
                            <div>
                                <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
                                <p>新浪微博 转发:86 2018-06-14 11:08:56</p>
                            </div>
                        </li>
                        <li class="li">
                            <div class="div">
                                <img src="./img/hot.png" class="image">
                            </div>
                            <div>
                                <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
                                <p>新浪微博 转发:86 2018-06-14 11:08:56</p>
                            </div>
                        </li>
                        <li>
                            <div class="div">
                                <img src="./img/hot.png" class="image">
                            </div>
                            <div>
                                <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
                                <p>新浪微博 转发:86 2018-06-14 11:08:56</p>
                            </div>
                        </li>
                        <li class="li">
                            <div class="div">
                                <img src="./img/hot.png" class="image">
                            </div>
                            <div>
                                <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
                                <p>新浪微博 转发:86 2018-06-14 11:08:56</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 中间大盒子的右边的盒子 -->
        <div class="center-right">
            <div class="center-right-top-box">
                <p class="p1">舆情类别分析</p>
                <p class="p2">
                    <span>状态:已调解</span>
                    <span class="times">时间段:2018-06-10</span>
                </p>
                <div class="center-right-top"></div>
            </div>
            <div class="center-right-bottom-box">
                <p class="p1">七日舆情走势分析</p>
                <p class="p2">
                    <span>状态:已调解</span>
                    <span class="times">时间段:2018-06-10</span>
                </p>
                <div class="center-right-bottom"></div>
            </div>
        </div>
    </div>

    <!-- 最下面的盒子 -->
    <div class="bottom">
        <div class="bottom-left-box">
            <p class="p1">舆情环比分析</p>
            <p class="p2">
                <span>状态:已调解</span>
                <span class="times">时间段:2018-06-10至2018-06-14</span>
            </p>
            <div class="bottom-left"></div>
            <div class="bottom-left-2">
                <div>今日舆情总数</div>
                <div class="dv1">54</div>
                <div class="huan">环比<img src="./img/iconup.png">2%</div>
                <div>本周舆情总数</div>
                <div class="dv2">54</div>
                <div class="huan">环比<img src="./img/icondown.png">3%</div>
                <div>本周舆情总数</div>
                <div class="dv3">4</div>
                <div class="huan">环比<img src="./img/icondown.png">3%</div>
            </div>
        </div>
        <div class="bottom-content-box">
            <p class="p1">舆情同比分析</p>
            <p class="p2">
                <span>状态:已调解</span>
                <span class="times">时间段:2018-06-10至2018-06-14</span>
            </p>
            <div class="bottom-content"></div>
            <div class="bottom-content-2">
                <div>今年舆情总数</div>
                <div class="wu">54</div>
                <div class="blues">环比<img src="./img/iconup.png">2%</div>
            </div>
        </div>
        <div class="bottom-right-box">
            <p class="p1">矛盾纠纷七日数据统计</p>
            <p class="p2">
                <span>状态:已调解</span>
                <span class="times">时间段:2018-06-10至2018-06-14</span>
            </p>
            <div class="bottom-right"></div>
        </div>
    </div>
</body>
<script src="./lib/echarts.js"></script>
<script src="./js/center-right-top-2.js"></script>
<script src="./js/center-right-bottom.js"></script>
<script src="./js/bottom-right.js"></script>
<script src="./js/center-left-bottom.js"></script>
<script src="./js/center-left-top.js"></script>
<script src="./js/center-left-bottom-2.js"></script>
<script src="./js/bottom-left.js"></script>
<script src="./js/bottom-content.js"></script>

</html>